<!--  -->
<template>
  <view class="body_view">

    <view class="uner_one">
      <view class="name">姓名</view>
      <view class="input">
        <input class="uni-input" @input="onKeyInput" :value="inputValueName" placeholder="请输入姓名" />
      </view>
    </view>
    <view class="uner_one">
      <view class="name">证件类型</view>
      <view class="input1">
        <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
        <template>
          <view>
            <view class="uni-list">
              <view class="uni-list-cell">
                <!-- <view class="uni-list-cell-left">
                  当前选择
                </view> -->
                <view class="uni-list-cell-db">
                  <picker @change="bindPickerChange" :value="index" :range="array">
                    <view class="uni-input">{{array[index]}}</view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
      <view class="img_jiantou">
        <img src="../../static/left_jiantou.png" alt="">
      </view>
    </view>
    <view class="uner_one1">
      <view class="name">证件号</view>
      <view class="input">
        <input class="uni-input" :value="inputValueID" @input="onKeyInput1" @blur="onblur1" placeholder="请输入证件号" />
      </view>
    </view>
    <view class="uner_one1">
      <view class="name">手机号</view>
      <view class="input">
        <input class="uni-input" :value="inputValuePhone" @input="onKeyInput2" placeholder="请输入手机号" />
      </view>
    </view>
    <view class="bto_add">
      <view class="btn_add" @click="btn_add">
        保存观众信息
      </view>
    </view>
  </view>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import {
    saveOrUpdateAudience,
    verifyIdCard
  } from '@/common/request/api.js'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      const currentDate = this.getDate({
        format: true
      })
      return {
        title: 'picker',
        array: ['身份证', ],
        index: 0,
        date: currentDate,
        time: '12:01',
        inputValueName: "",
        inputValueID: "",
        museumId: "16",
        inputValuePhone: "",
        idCart: "身份证",
        inputValueIDBase64: ""
      }

    },
    //监听属性 类似于data概念
    computed: {
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      onblur1(e) {
        console.log(e.detail.value)
        this.inputValueID = e.detail.value.toUpperCase()
        this.getEncode64(this.inputValueID)
      },
      getEncode64(str) {
        // 对字符串进行编码
        var encode = encodeURI(str);
        // 对编码的字符串转化base64
        var base64 = btoa(encode);
        console.log(base64);
        return this.inputValueIDBase64 = base64;
      },
      //保存用户信息
      btn_add() {
        console.log(this.inputValueID);
        console.log("88888");
        console.log(this.idCart);
        if (this.idCart == "身份证") {
          // debugger
          verifyIdCard(
            this.inputValueIDBase64
          ).then((res) => {
            console.log(res.data.data);
            if (res.data.data == false) {
              console.log("身份证合法");
              uni.showToast({
                title: '身份证输入不合法',
                icon: 'none',
                duration: 2000
              });
            } else if (this.inputValueName != "" && this.inputValueID != "") {
              saveOrUpdateAudience({
                idCard: this.inputValueID,
                museumId: this.museumId,
                name: this.inputValueName,
                phone: this.inputValuePhone
              }).then((res) => {
                console.log(res.data.data);
                if (res.data.data == true) {
                  uni.showToast({
                    title: '保存成功',
                    icon: 'none',
                    duration: 2000
                  });
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: 1
                    });
                  }, 2000)
                }
              })
            } else {
              uni.showToast({
                title: '请填写完整信息',
                icon: 'none',
                duration: 2000
              });
            }
          })

        }
      },
      onKeyInput2(event) {
        this.inputValuePhone = event.target.value
        console.log(this.inputValuePhone);
      },
      onKeyInput (event) {
        this.inputValueName = event.target.value
        console.log(this.inputValueName);
      },
      onKeyInput1: function (event) {
        this.inputValueID = event.target.value;
        //判断this.inputValueID是否是身份证或者是护照满足一个即可
        // console.log(this.array);
        // console.log(this.inputValueID);
      },
      bindPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        console.log(this.array[e.detail.value], "/**////");
        this.idCard = this.array[e.detail.value]
        this.index = e.detail.value
      },
      bindDateChange: function (e) {
        this.date = e.detail.value
      },
      bindTimeChange: function (e) {
        this.time = e.detail.value
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },

    },
    onLoad(options) {
      console.log(options);
      this.inputValueName = options.name
      this.inputValueID = options.idCard
      this.inputValuePhone = options.phone

    },
    beforeCreate() {}, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    beforeMount() {}, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang="less" scoped src="./index.less">
</style>